<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    width=650
    placement="right"
    :closable="true"
    @close="close"
    :visible="visible"
    style="overflow: auto;padding-bottom: 53px;">

    <a-form>
      <a-form-item label='所拥有的报表权限'>
        <a-tree
          checkable
          @check="onCheck"
          :checkedKeys="checkedKeys"
          :treeData="treeData"
          @expand="onExpand"
          @select="onTreeNodeSelect"
          :selectedKeys="selectedKeys"
          :expandedKeys="expandedKeysss"
          :checkStrictly="checkStrictly">
          <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
            {{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>
          </span>
        </a-tree>
      </a-form-item>
    </a-form>

    <div class="drawer-bootom-button">
      <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
          <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
          <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
          <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
          <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
          <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
        </a-menu>
        <a-button>
          树操作 <a-icon type="up" />
        </a-button>
      </a-dropdown>
      <a-popconfirm title="确定放弃编辑？" @confirm="close" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit(false)" type="primary" :loading="loading" ghost style="margin-right: 0.8rem">仅保存</a-button>
      <a-button @click="handleSubmit(true)" type="primary" :loading="loading">保存并关闭</a-button>
    </div>

    <role-datarule-modal ref="datarule"></role-datarule-modal>

  </a-drawer>

</template>
<script>
  import {queryTreeListForRole2,queryRoleReport,saveRoleReport} from '@/api/api'
  import RoleDataruleModal from './RoleDataruleModal.vue'

  /*queryTreeListForRole2暂时废弃，直接定义相关数据*/
  const treeData = [{
      key: 'SJBL',
      title: '数据补录',
      isLeaf: false,
      value: 'SJBL',
      children: [
        {
          title: '客户信息',
          key: 'KHXX',
          isLeaf: false,
          value: 'KHXX',
          children: [
            { title: '个人客户信息表', key: 'GRKHXX', children:[],isLeaf: true },
            { title: '对公客户信息表', key: 'DGKHXX',children:[],isLeaf: true }
          ],
        },
        {
          title: '机构信息',
          key: 'JGXX',
          isLeaf: false,
          children: [
            { title: '金融机构法人信息表', key: 'JGFRXX',children:[],isLeaf: true },
            { title: '金融机构分支信息表', key: 'JGFZXX',children:[],isLeaf: true }
          ],
        },
        {
          title: '贷款信息',
          key: 'DKXX',
          isLeaf: false,
          value: 'DKXX',
          children: [
            { title: '个人贷款基础信息表', key: 'GRDKJC',children:[],isLeaf: true },
            { title: '个人贷款余额信息表', key: 'GRDKYE',children:[],isLeaf: true },
            { title: '个人贷款放款信息表', key: 'GRDKFK',children:[],isLeaf: true },

            { title: '非同业单位贷款基础信息表', key: 'DWDKJC',children:[],isLeaf: true },
            { title: '非同业单位贷款余额信息表', key: 'DWDKYE',children:[],isLeaf: true },
            { title: '非同业单位贷款放款信息表', key: 'DWDKFK',children:[],isLeaf: true },

            { title: '透支业务余额信息表', key: 'TZYWYE',children:[],isLeaf: true },
            { title: '透支业务交易流水表', key: 'TZYWJY',children:[],isLeaf: true },
            { title: '透支业务账单信息表', key: 'TZYWZD',children:[],isLeaf: true },
            { title: '透支业务分期信息表', key: 'TZYWFQ',children:[],isLeaf: true },

            { title: '委托贷款基础信息表', key: 'WTDKJC',children:[],isLeaf:true },
            { title: '委托贷款余额信息表', key: 'WTDKYE',children:[],isLeaf:true },
            { title: '委托贷款放款信息表', key: 'WTDKFK',children:[],isLeaf:true },
          ],
        },
        {
          title: '存款信息',
          key: 'CKXX',
          isLeaf: false,
          value: 'CKXX',
          children: [
            { title: '个人存款基础信息表', key: 'GRCKJC',children:[],isLeaf:true },
            { title: '个人存款余额信息表', key: 'GRCKYE',children:[],isLeaf:true },
            { title: '个人存款发生额信息表', key: 'GRCKFS',children:[],isLeaf:true },
            { title: '非同业单位存款基础信息表', key: 'DWCKJC',children:[],isLeaf:true },
            { title: '非同业单位存款余额信息表', key: 'DWCKYE',children:[],isLeaf:true },
            { title: '非同业单位存款发生额信息表', key: 'DWCKFS',children:[],isLeaf:true },
          ],
        },
        {
          title: '同业信息',
          key: 'TYXX',
          isLeaf: false,
          value: 'TYXX',
          children: [
            { title: '同业存款基础信息表', key: 'TYCKJC',children:[],isLeaf:true },
            { title: '同业借贷余额信息表', key: 'TYCKYE',children:[],isLeaf:true },
            { title: '同业借贷发生额信息表', key: 'TYCKFS',children:[],isLeaf:true },

            { title: '同业借贷基础信息表', key: 'TYJDJC',children:[],isLeaf:true },
            { title: '同业借贷余额信息表', key: 'TYJDYE',children:[],isLeaf:true },
            { title: '同业借贷发生额信息表', key: 'TYJDFS',children:[],isLeaf:true },

            { title: '买入返售及卖出回购基础信息表', key: 'MRFSJC',children:[],isLeaf:true },
            { title: '买入返售及卖出回购余额信息表', key: 'MRFSYE',children:[],isLeaf:true },
            { title: '买入返售及卖出回购发生额信息表', key: 'MRFSFS',children:[],isLeaf:true },
          ],
        },
        {
          title: '票据信息',
          key: 'PJXX',
          isLeaf: false,
          value: 'PJXX',
          children: [
            { title: '票据贴现及转贴现基础信息表', key: 'PJTXJC',children:[],isLeaf:true },
            { title: '票据贴现及转贴现余额信息表', key: 'PJTXYE',children:[],isLeaf:true },
            { title: '票据贴现及转贴现发生额信息表', key: 'PJTXFS',children:[],isLeaf:true },
          ],
        },
        {
          title: 'FTP信息',
          key: 'FTPXX',
          isLeaf: false,
          value: 'FTPXX',
          children: [
            { title: 'FTP定价变动明细信息表', key: 'FTPDJB',children:[],isLeaf:true },

          ],
        },
        {
          title: '利差息差',
          key: 'LCXC',
          isLeaf: false,
          value: 'LCXC',
          children: [
            { title: '人民币利差息差统计表', key: 'LCXCTJ',children:[],isLeaf:true },
          ],
        },
      ],
    }];
  const allTreeKeys = [
    'SJBL',
    'KHXX','GRKHXX','DGKHXX',
    'JGXX','JGFRXX','JGFZXX',
    'DKXX','GRDKJC','GRDKYE','GRDKFK','DWDKJC','DWDKYE','DWDKFK','TZYWYE','TZYWJY','TZYWZD','TZYWFQ','WTDKJC','WTDKYE','WTDKFK',
    'CKXX','GRCKJC','GRCKYE','GRCKFS','DWCKJC','DWCKYE','DWCKFS',
    'TYXX','TYCKJC','TYCKYE','TYCKFS','TYJDJC','TYJDYE','TYJDFS','MRFSJC','MRFSYE','MRFSFS',
    'PJXX','PJTXJC','PJTXYE','PJTXFS',
    'FTPXX','FTPDJB',
    'LCXC','LCXCTJ'
  ];

  export default {
    name: "RoleModal",
    components:{
      RoleDataruleModal
    },
    data(){
      return {
        roleId:"",
        treeData,
        defaultCheckedKeys:[],
        checkedKeys:[],
        expandedKeysss:[],
        allTreeKeys,
        autoExpandParent: true,
        checkStrictly: true,
        title:"角色报表配置",
        visible: false,
        loading: false,
        selectedKeys:[]
      }
    },
    methods: {
      onTreeNodeSelect(id){
        if(id && id.length>0){
          this.selectedKeys = id
        }
        this.$refs.datarule.show(this.selectedKeys[0],this.roleId)
      },
      onCheck (o) {
        if(this.checkStrictly){
          this.checkedKeys = o.checked;
        }else{
          this.checkedKeys = o
        }
      },
      show(roleId){
        this.roleId=roleId
        this.visible = true;
      },
      close () {
        this.reset()
        this.$emit('close');
        this.visible = false;
      },
      onExpand(expandedKeys){
        this.expandedKeysss = expandedKeys;
        this.autoExpandParent = false
      },
      reset () {
        this.expandedKeysss = []
        this.checkedKeys = []
        this.defaultCheckedKeys = []
        this.loading = false
      },
      expandAll () {
        this.expandedKeysss = this.allTreeKeys
      },
      closeAll () {
        this.expandedKeysss = []
      },
      checkALL () {
        this.checkedKeys = this.allTreeKeys
      },
      cancelCheckALL () {
        //this.checkedKeys = this.defaultCheckedKeys
        this.checkedKeys = []
      },
      switchCheckStrictly (v) {
        if(v==1){
          this.checkStrictly = false
        }else if(v==2){
          this.checkStrictly = true
        }
      },
      handleCancel () {
        this.close()
      },
      handleSubmit(exit) {
        let that = this;
        let params =  {
          roleId:that.roleId,
          permissionIds:that.checkedKeys.join(","),
          lastpermissionIds:that.defaultCheckedKeys.join(","),
        };
        that.loading = true;
        console.log("请求参数：",params);
        saveRoleReport(params).then((res)=>{
          if(res.success){
            that.$message.success(res.message);
            that.loading = false;
            if (exit) {
              that.close()
            }
          }else {
            that.$message.error(res.message);
            that.loading = false;
            if (exit) {
              that.close()
            }
          }
          this.loadData();
        })
      },
      loadData(){
        /*queryTreeListForRole2().then((res) => {
          this.treeData = res.result.treeList
          this.allTreeKeys = res.result.ids
        })*/
        console.log(this.treeData);
        queryRoleReport({roleId:this.roleId}).then((res)=>{
          this.checkedKeys = [...res.result];
          this.defaultCheckedKeys = [...res.result];
          this.expandedKeysss = this.allTreeKeys;
          console.log(this.defaultCheckedKeys)
        })
      }
    },
  watch: {
    visible () {
      if (this.visible) {
        this.loadData();
      }
    }
  }
  }

</script>
<style lang="less" scoped>
  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }

</style>